/**
 * 路由定义 会告诉路由器，
 * 当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时，
 * 要显示哪个视图。
 */
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';

import {HeroesComponent} from './heroes/heroes.component';
import {DashboardComponent} from "./dashboard/dashboard.component";
import {HeroDetailComponent} from "./hero-detail/hero-detail.component";

/**
 * 当应用启动时，浏览器的地址栏指向了网站的根路径。 它没有匹配到任何现存路由，因此路由器也不会导航到任何地方。 <router-outlet> 下方是空白的。
 * 要让应用自动导航到这个仪表盘，请把下列路由添加到 AppRoutingModule.Routes 数组中。
 * 这个路由会把一个与空路径“完全匹配”的 URL 重定向到路径为 '/dashboard' 的路由。
 *
 * path 中的冒号（:）表示 :id 是一个占位符，它表示某个特定英雄的 id。
 */
const routes: Routes = [
  {path: '', redirectTo: '/dashboard', pathMatch: 'full'},
  {path: 'heroes', component: HeroesComponent},
  {path: 'dashboard', component: DashboardComponent},
  {path: 'detail/:id', component: HeroDetailComponent}
];

/**
 * 把 RouterModule 添加到 @NgModule.imports 数组中，
 * 并用 routes 来配置它。
 * 你只要调用 imports 数组中的 RouterModule.forRoot() 函数就行了。
 *
 * 这个方法之所以叫 forRoot()，
 * 是因为你要在应用的顶级配置这个路由器。
 * forRoot() 方法会提供路由所需的服务提供商和指令，
 * 还会基于浏览器的当前 URL 执行首次导航。
 */
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule {

}
